<template>
  <div class="min-h-full">
    <app-header @refresh="refresh" />

    <header class="bg-white shadow">
      <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-bold tracking-tight text-gray-900">
          {{ title }}
        </h1>
      </div>
    </header>
    <main>
      <div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
        <!-- Your content -->
        <suspense>
          <template #default>
            <router-view :key="routerKey"></router-view>
          </template>
          <template #fallback>
            <div
              v-loading="true"
              element-loading-text="Loading..."
              class="fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]"
            ></div>
          </template>
        </suspense>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import AppHeader from '@/components/AppHeader/AppHeader.vue';
import { useGlobalStore } from '@/store/global';

const $router = reactive(useRouter());
const currentUserRole = ref();
const globalStore = useGlobalStore();

const getPrivilege = () => {
  currentUserRole.value = globalStore.userPrivilege;
};

const title = computed(() => {
  return ($router.currentRoute.meta.title as ComputedRef<string | null>).value;
});

const routerKey = ref(0);
const refresh = () => {
  routerKey.value++;
};
provide('refresh', refresh);

onMounted(() => {
  getPrivilege();
});
</script>
